<div id="content_header">
  <h3>Create a new credit card transaction record</h3>
</div>
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="form" role="form" ng-submit="add()">

      <div class="form-group" ng-class="{ 'has-error': errors.CreditCardType}">
        <label class="required" for="CreditCardTypeId">Credit Card</label>
        <select name="" class="form-control" id="CreditCardTypeId" ng-model="newItem.CreditCardType.Id" ng-options="creditcard.Id as creditcard.Name for creditcard in creditcardtypes" required>
          <option value="" ng-hide="newItem.CreditCardType.Id">Select a Credit Card.</option>
        </select>
        <error-widget field="errors.CreditCardType"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.CardNumber}">
        <label class="required" for="CardNumber">Card Number</label>
        <input type="text" name="CardNumber" class="form-control" id="CardNumber" placeholder="Input field" ng-model="newItem.CardNumber" required>
        <error-widget field="errors.CardNumber"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Amount}">
        <label class="required" for="Amount">Amount</label>
        <input type="number" name="Amount" class="form-control" id="Amount" placeholder="Input field" ng-model="newItem.Amount" required>
        <error-widget field="errors.Amount"></error-widget>
      </div>

      <!-- <div class="form-group" ng-class="{ 'has-error': errors.FullName}">
        <label class="required" for="Amount">Amount</label>
        <input type="number" name="Amount" class="form-control" id="Amount" placeholder="Input field" ng-model="newItem.Amount" min="0" required>
        <error-widget field="errors.FullName"></error-widget>
      </div> -->

      <div class="form-group" ng-class="{ 'has-error': errors.Name}">
        <label class="required" for="Name">Name</label>
        <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="newItem.Name" required>
        <error-widget field="errors.Name"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.ExpirationMonth}">
        <label class="required" for="ExpirationMonth">Expire Month</label>
        <input type="number" name="ExpirationMonth" class="form-control" id="ExpirationMonth" placeholder="Input field" ng-model="newItem.ExpirationMonth" min="0" max="12" required>
        <error-widget field="errors.ExpirationMonth"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.ExpirationYear}">
        <label class="required" for="ExpirationYear">Expire Year</label>
        <input type="number" name="ExpirationYear" class="form-control" id="ExpirationYear" placeholder="Input field" ng-model="newItem.ExpirationYear" min="1991" required>
        <error-widget field="errors.ExpirationYear"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
    
  </div>
</div>